<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>售房信息发布 </title>
    <meta http-equiv="Cache-Control" content="no-transform ">
    <meta name="applicable-device" content="pc">

    <!--TODO 新增：页面主样式-->
    <link rel="stylesheet" th:href="@{/css/index_v20210119153832.css}">

    <!--公共组件（header、footer）样式-->
    <link type="text/css" rel="stylesheet" th:href="@{/css/CompontsLoader_v20190402152128.css}" media="all">

    <link id="dynamic-style" rel="stylesheet" charset="utf-8" media="all" type="text/css" th:href="@{/css/main.css}">
    <link th:href="@{/css/rent_pic_style.css}" type="text/css" rel="stylesheet" />

    <link rel="stylesheet" type="text/css" th:href="@{/css/bmaps.css}">
    <link rel="stylesheet" th:href="@{/css/commercial_peg_v20191017170251.css}">
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <style type="text/css">

        .layui-form-label {
        width: 80px;
        }

        .sellHouseForm{
            position: relative ;
            width: 1000px;
            left: 420px;
            height: 500px;
            /*background: #0ca2eb;*/
        }
        .rentHouseTitle{
            position: relative ;
            height: 50px;
            width: 300px;
            left: 525px;
            margin-top: 15px;
        }
        .titleSpan{
            font-size: 30px;
            /*Sans-serif*/
            font-family:幼圆 ;
        }

    </style>
</head>


<body>
<!-- 导航条 -->
<div id="commonTopbar" class="commonTopbar" style="min-width: 1190px;">
    <div class="w pos">
        <div class="bar_left">
            <h2>南阳</h2>&nbsp;&nbsp;&nbsp;&nbsp;
        </div>

        <div id="commonTopbar_homepageLink">
            <strong>
                <a class="mytxt" href="/yju/index" target="_self" >首页</a>
            </strong>
        </div>

        <input type="hidden" name="id" id="userId"    th:value="${session.commonUser?.id}">
        <input type="hidden" name="username" id="username"   th:value="${session.commonUser?.username}">
        <div class="bar_right">
            <div id="commonTopbar_login">
            </div>
            <div id="commonTopbar_my58menu" class="haschild">
                <a id="commonTopbar_tomy58"
                   target="_self"
                   href="javascript:;">个人中心</a>
                <span class="arrow"></span>
                <span class="mark"></span>
                <div class="hc" id="commonTopbar_loginbox">
                    <a href="/yju/personInfo" target="_self"> 信息修改</a>
                    <a href="/yju/passwordReset" target="_self"> 重置密码</a>
                    <a href="/yju/rentHouseInfoList" target="_self">租房信息</a>
                    <a href="/yju/sellHouseInfoList" target="_self">售房信息</a>
                </div>
            </div>

            <div id="commonTopbar_vip" class="haschild">
                <a class="mytxt" href="javascript:;" target="_self">
                    发布房源
                </a>
                <span class="arrow"></span>
                <span class="mark"></span>
                <div class="hc">
                    <a href="/yju/publishRentHouseInfo" target="_self">发布租房</a>
                    <a href="/yju/publishSellHouseInfo" target="_self">发布售房</a>
                </div>
            </div>


        </div>
    </div>
</div>

<div class="rentHouseTitle">
    <span class="titleSpan">填写售房信息</span>
</div>

<!--表单-->

<div class="sellHouseForm">
    <div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
        <input type="hidden" name="id" th:if="${sellHouse}" th:value="${sellHouse.id}">
        <div class="layui-form-item" style="width: 550px">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.title}:''" type="text" name="title" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 650px">
            <label class="layui-form-label">上传图片</label>
            <input type="hidden" name="picture" id="picture"  th:value="${sellHouse?.picture}">
            <div class="layui-input-block">
                <!--多张图片上传-->
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="uploadImgs">点击选择图片</button>
                    <button type="button" class="layui-btn layui-btn-normal" id="resetImg">重置</button>

                    <p>图片预览：</p>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">

                        <div class="layui-upload-list" id="previewImg">
                            <div th:each="image,status:${#strings.arraySplit(sellHouse?.picture,',')}">
                                <img th:src="${'/upload/sellHouse/'+image}"  style="position: relative ;left:12px; width: 95%;height: auto;margin-bottom: 10px"
                                     th:alt="${image}"  class="layui-upload-img" />
                            </div>
                        </div>

                    </blockquote>
                    <button type="button" class="layui-btn" id="upoadBtn">点击上传</button>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">联系人</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.linkman}:''" type="text" name="linkman" lay-verify="required" placeholder="请输入联系人" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.phone}:''" type="text" name="phone" lay-verify="phone" placeholder="请输入号码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.email}:''" type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">户型</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.houseType}:''" type="text" name="houseType" lay-verify="required" placeholder="请输入户型" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="width: 450px">
            <label class="layui-form-label">位置</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.location}:''" type="text" name="location" lay-verify="required" placeholder="请输入位置" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">地区</label>
            <div class="layui-input-block">
                <select name="region" class="region_select" lay-verify="required">
                    <option  value="">请选择地区</option>
                    <option th:each="region : ${session.regionList}" th:value="${region.regionName}" th:text="${region.regionName}" th:selected="${sellHouse != null and sellHouse.region == region.regionName}" > </option>
                </select>
            </div>
        </div>
        <br/>
        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">小区</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.housingEstate}:''" type="text" name="housingEstate" lay-verify="required" placeholder="请输入小区" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">面积(㎡)</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.area}:''" type="text" name="area" lay-verify="number" placeholder="请输入面积(㎡)" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">价格(元/㎡)</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.unitPrice}:''" type="text" name="unitPrice" lay-verify="number" placeholder="请输入价格(元/㎡)" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">总价格(万)</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.totalPrice}:''" type="text" name="totalPrice" lay-verify="number" placeholder="请输入价格(万)" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">总楼层</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.floor}:''" type="text" name="floor" lay-verify="number" placeholder="请输入总楼层（正整数）" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">楼层</label>
            <div class="layui-input-block">
                <select name="floorLevel" class="floorLevel_select" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:selected="${sellHouse?.floorLevel == '底层'}" value="底层" >底层</option>
                    <option th:selected="${sellHouse?.floorLevel == '低层'}" value="低层" >低层</option>
                    <option th:selected="${sellHouse?.floorLevel == '中层'}" value="中层" >中层</option>
                    <option th:selected="${sellHouse?.floorLevel == '高层'}" value="高层" >高层</option>
                    <option th:selected="${sellHouse?.floorLevel == '顶层'}" value="顶层" >顶层</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">房屋类型</label>
            <div class="layui-input-block">
                <select id="type" name="type" class="type_select" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:selected="${sellHouse?.type == '普通住宅'}"  value="普通住宅" >普通住宅</option>
                    <option th:selected="${sellHouse?.type == '公寓'}" value="公寓" >公寓</option>
                    <option th:selected="${sellHouse?.type == '别墅'}"  value="别墅" >别墅</option>
                    <option th:selected="${sellHouse?.type == '其他'}"  value="其他" >其他</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">装修情况</label>
            <div class="layui-input-block">
                <select name="decoration" class="decoration_select" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:selected="${sellHouse?.decoration == '毛坯'}" value="毛坯" >毛坯</option>
                    <option th:selected="${sellHouse?.decoration == '简单装修'}" value="简单装修" >简单装修</option>
                    <option th:selected="${sellHouse?.decoration == '精装修'}" value="精装修" >精装修</option>
                    <option th:selected="${sellHouse?.decoration == '豪华装修'}" value="豪华装修" >豪华装修</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">朝向</label>
            <div class="layui-input-block">
                <select name="orientation" class="orientation_select" lay-verify="required">
                    <option value="">请选择</option>
                    <option  th:selected="${sellHouse?.orientation == '东'}" value="东" >东</option>
                    <option  th:selected="${sellHouse?.orientation == '南'}" value="南" >南</option>
                    <option  th:selected="${sellHouse?.orientation == '西'}" value="西" >西</option>
                    <option  th:selected="${sellHouse?.orientation == '北'} " value="北" >北</option>
                    <option  th:selected="${sellHouse?.orientation == '东南'}" value="东南" >东南</option>
                    <option  th:selected="${sellHouse?.orientation == '东西'}" value="东西" >东西</option>
                    <option  th:selected="${sellHouse?.orientation == '南北'}" value="南北" >南北</option>
                    <option  th:selected="${sellHouse?.orientation == '西南'}" value="西南" >西南</option>
                    <option  th:selected="${sellHouse?.orientation == '东北'}" value="东北" >东北</option>
                    <option  th:selected="${sellHouse?.orientation == '西北'}" value="西北" >西北</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="width: 450px;height:300px ">
            <label class="layui-form-label">房源概况</label>
            <div class="layui-input-block">
                <textarea style="resize: none;width: 450px; height: 300px"  th:text="${sellHouse != null}?${sellHouse.houseSituation}:''" name="houseSituation"  lay-verify="required" placeholder="请输入房源概况" autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item" style="width: 250px">
            <label class="layui-form-label">产权性质</label>
            <div class="layui-input-block">
                <select name="nature" class="nature_select" lay-verify="required">
                    <option value="">请选择</option>
                    <option  th:selected="${sellHouse?.nature == '商品房'}" value="商品房" >商品房</option>
                    <option  th:selected="${sellHouse?.nature == '商住两用'}" value="商住两用" >商住两用</option>
                    <option  th:selected="${sellHouse?.nature == '经济适用房'}" value="经济适用房" >经济适用房</option>
                    <option  th:selected="${sellHouse?.nature == '公房'}" value="公房" >公房</option>
                    <option  th:selected="${sellHouse?.nature == '其他'}" value="其他" >其他</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="width: 550px">
            <label class="layui-form-label">产权年限</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.natureAgeLimit}:''" type="text" name="natureAgeLimit" lay-verify="number" placeholder="请输入产权年限" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 550px">
            <label class="layui-form-label">房本年限</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.premisesPermitAge}:''" type="text" name="premisesPermitAge"  placeholder="请输入房本年限(可不填)" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 550px">
            <label class="layui-form-label">建造情况</label>
            <div class="layui-input-block">
                <input th:value="${sellHouse != null}?${sellHouse.bulidCondition}:''" type="text" name="bulidCondition"  placeholder="请输入房屋建造情况(可不填)" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item" >
            <label class="layui-form-label">电梯</label>
            <div class="layui-input-block">
                <input th:checked="${sellHouse?.lift == 1}"  lay-verify="otherReq" type="radio" name="lift" value="1" title="有">
                <input th:checked="${sellHouse?.lift == 0}"  lay-verify="otherReq" type="radio" name="lift" value="0" title="无" >
            </div>
        </div>

        <div class="layui-form-item" >
            <label class="layui-form-label">唯一住房</label>
            <div class="layui-input-block">
                <input th:checked="${sellHouse?.onlyHousing == 1}"  lay-verify="otherReq" type="radio" name="onlyHousing" value="1" title="是">
                <input th:checked="${sellHouse?.onlyHousing == 0}"  lay-verify="otherReq" type="radio" name="onlyHousing" value="0" title="否" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">南北通透</label>
            <div class="layui-input-block">
                <input th:checked="${sellHouse?.northSouth == 1}" lay-verify="otherReq" type="radio" name="northSouth" value="1" title="是">
                <input th:checked="${sellHouse?.northSouth == 0}" lay-verify="otherReq" type="radio" name="northSouth" value="0" title="否" >
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button th:text="${sellHouse != null}?'修改':'发布'" class="layui-btn" lay-submit="" lay-filter="addSellHouse">发布</button>
                <button th:if="${sellHouse == null}" type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>


</div>



<script th:src="@{/js/jquery-1.10.2.min.js}" type="text/javascript"></script>
<script th:src="@{/js/carousel.min.js}" type="text/javascript"></script>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script type="text/javascript">

    var flag = 1
    var upMark = 0;
    layui.use(['form','upload','jquery','layedit', 'laydate'], function () {
        var form = layui.form;
        var upload = layui.upload;
        var $ = layui.jquery;
        var layer = layui.layer;
        var layedit = layui.layedit;
        var laydate = layui.laydate;

        $("#commonTopbar_my58menu").mouseover(function (){
            $("#commonTopbar_my58menu").addClass("hover")
        })

        $("#commonTopbar_my58menu").mouseout(function (){
            $("#commonTopbar_my58menu").removeClass("hover")
        })

        $("#commonTopbar_vip").mouseover(function () {
            $("#commonTopbar_vip").addClass("hover")
        })

        $("#commonTopbar_vip").mouseout(function () {
            $("#commonTopbar_vip").removeClass("hover")
        })

        $(function(){

            var username= $("#username").val()
            var login_html = ''
            if(username ==''){

                login_html = "<a href='/yju/login' target='_self' >登录</a>"
                    + "<span class='gap'>|</span>"
                    + "<a href='/yju/register' target='_self' >注册</a>"

            }else{
                login_html = "<span>"+username+"</span>"
                    + "<span class='gap'>|</span>"
                    + "<a href='/yju/logout'>退出</a>"
            }
            $("#commonTopbar_login").html(login_html)
        })


        form.on('submit(addSellHouse)',function (data) {
            var picture = $("#picture").val()
            if ( upMark == 0 && picture == '' ){
                layer.msg("请上传图片！");
                return ;
            }

            $.ajax({
                url:'/sellHouse/addSellHouse',
                data:data.field,
                dataType:'json',
                type:'post',
                success:function (data) {
                    if (data.success){
                        layer.msg(data.message,{time:1100},function() {
                            window.location.href="/yju/sellHouseInfoList"
                        })
                    }else{
                        layer.msg(data.message);
                    }
                }
            });
            return false;
        })

        //重置
        $("#reset").click(function () {
            $("input").val("");
            $("textarea").val('')
            var options = $("select").find("option");
            options.attr("selected", false);
            options.first().attr("selected", true);
            //图片重置
            resetImg()
        })

        upload.render({
            elem: '#uploadImgs'
            ,multiple: true
            ,auto:false
            ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#previewImg').append('<img src="'+ result +'"  style="position: relative ;left:12px; width: 95%;height: auto;margin-bottom: 10px" alt="'+ file.name +'" class="layui-upload-img">')
                });
                files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            }
            ,done: function(res){

            },

        });

        //自定义验证规则
        form.verify({
            otherReq: function (value, item) {
                var $ = layui.$;
                var verifyName = $(item).attr('name')
                    , verifyType = $(item).attr('type')
                    , formElem = $(item).parents('.layui-form')//获取当前所在的form元素，如果存在的话
                    , verifyElem = formElem.find('input[name=' + verifyName + ']')//获取需要校验的元素
                    , isTrue = verifyElem.is(':checked')//是否命中校验
                    , focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
                if (!isTrue || !value) {
                    //定位焦点
                    focusElem.css(verifyType == 'radio' ? {"color": "#FF5722"} : {"border-color": "#FF5722"});
                    //对非输入框设置焦点
                    focusElem.first().attr("tabIndex", "1").css("outline", "0").blur(function () {
                        focusElem.css(verifyType == 'radio' ? {"color": ""} : {"border-color": ""});
                    }).focus();
                    return '必选，不能为空';
                }
            }
        })


        $("#resetImg").click(function (){
            resetImg()
        })

        function resetImg(){
            $('#previewImg').html('');
            //picture的值设为null
            $('#picture').val('')
            files=null
            flag = 1
            $.ajax({
                url:'/sellHouse/removeSeesionValue',
                type:'get',
                success:function (data) {
                    if (data.success){
                        layer.msg(data.message);
                    }else{
                        layer.msg(data.message);
                    }

                }
            });
            upMark = 0
        }

        $("#upoadBtn").click(function () {
            var id = $('#id').val()
            var picture = $('#picture').val()
            if ( (typeof (files) !== "undefined" && files != null)  ) {
                if (flag == 0) {
                    layer.msg("已上传，请勿重新点击！");
                    return;

                } else if (flag == 1) {
                    flag = 0
                }
                var form = new FormData();
                for (let i in files) {
                    form.append("imgs", files[i]);
                }
                $.ajax({
                    url: '/sellHouse/uploadImgs',
                    type: "post",
                    async: true,
                    contentType: false,
                    processData: false,
                    data: form,
                    success: function (data) {
                        if (data.success) {
                            layer.msg(data.message);
                        } else {
                            layer.msg(data.message);
                        }
                    }
                })
                upMark = 1
            }
            else {
                layer.msg("图片不能为空，请选择！");
            }
        })

    });

</script>


</body>
</html>
